<template>
    <div class="position-filter">
        <div class="filter-content">
            <div class="filter-row">
                <!-- 城市位置 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('city', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.city !== 'all' }">
                            {{ selectedFilters.city === "all" ? "城市位置" : getFilterLabel("city") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[0].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.city === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 求职类型 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('jobType', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.jobType !== 'all' }">
                            {{ selectedFilters.jobType === "all" ? "求职类型" : getFilterLabel("jobType") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[1].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.jobType === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 薪资待遇 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('salary', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.salary !== 'all' }">
                            {{ selectedFilters.salary === "all" ? "薪资待遇" : getFilterLabel("salary") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[2].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.salary === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 工作经验 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('experience', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.experience !== 'all' }">
                            {{ selectedFilters.experience === "all" ? "工作经验" : getFilterLabel("experience") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[3].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.experience === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 学历要求 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('education', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.education !== 'all' }">
                            {{ selectedFilters.education === "all" ? "学历要求" : getFilterLabel("education") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[4].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.education === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 公司行业 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('industry', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.industry !== 'all' }">
                            {{ selectedFilters.industry === "all" ? "公司行业" : getFilterLabel("industry") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[5].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.industry === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 公司规模 -->
                <div class="filter-col">
                    <el-dropdown trigger="click" @command="(val) => handleFilterSelect('companySize', val)">
                        <span class="filter-button" :class="{ 'is-active': selectedFilters.companySize !== 'all' }">
                            {{ selectedFilters.companySize === "all" ? "公司规模" : getFilterLabel("companySize") }}
                            <el-icon><arrow-down /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item
                                    v-for="option in mainFilters[6].options"
                                    :key="option.value"
                                    :command="option.value"
                                    :class="{ 'is-active': selectedFilters.companySize === option.value }"
                                >
                                    {{ option.label }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <!-- 清空按钮 -->
                <div class="clear-filter">
                    <el-button type="text" @click="resetAllFilters" class="clear-btn">
                        <el-icon><Delete /></el-icon>
                        清空筛选
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed } from "vue";
import { Delete, ArrowDown } from "@element-plus/icons-vue";

const emit = defineEmits(["filter-change"]);

// 主要筛选条件
const mainFilters = [
    {
        key: "city",
        label: "城市位置",
        options: [
            { label: "全国", value: "all" },
            { label: "北京", value: "beijing" },
            { label: "上海", value: "shanghai" },
            { label: "广州", value: "guangzhou" },
            { label: "深圳", value: "shenzhen" },
            { label: "杭州", value: "hangzhou" },
            { label: "天津", value: "tianjin" },
        ],
    },
    {
        key: "jobType",
        label: "求职类型",
        options: [
            { label: "全部", value: "all" },
            { label: "全职", value: "fulltime" },
            { label: "兼职", value: "parttime" },
            { label: "实习", value: "intern" },
            { label: "校招", value: "campus" },
            { label: "社招", value: "social" },
        ],
    },
    {
        key: "salary",
        label: "薪资待遇",
        options: [
            { label: "不限", value: "all" },
            { label: "3K以下", value: "under3k" },
            { label: "3K-5K", value: "3k-5k" },
            { label: "5K-10K", value: "5k-10k" },
            { label: "10K-15K", value: "10k-15k" },
            { label: "15K-20K", value: "15k-20k" },
            { label: "20K-30K", value: "20k-30k" },
            { label: "30K以上", value: "above30k" },
        ],
    },
    {
        key: "experience",
        label: "工作经验",
        options: [
            { label: "不限", value: "all" },
            { label: "应届生", value: "fresh" },
            { label: "1年以内", value: "under1" },
            { label: "1-3年", value: "1-3" },
            { label: "3-5年", value: "3-5" },
            { label: "5-10年", value: "5-10" },
            { label: "10年以上", value: "above10" },
        ],
    },
    {
        key: "education",
        label: "学历要求",
        options: [
            { label: "不限", value: "all" },
            { label: "大专", value: "college" },
            { label: "本科", value: "bachelor" },
            { label: "硕士", value: "master" },
            { label: "博士", value: "phd" },
        ],
    },
    {
        key: "industry",
        label: "公司行业",
        options: [
            { label: "不限", value: "all" },
            { label: "互联网", value: "internet" },
            { label: "电子商务", value: "ecommerce" },
            { label: "金融", value: "finance" },
            { label: "教育", value: "education" },
            { label: "医疗健康", value: "medical" },
            { label: "人工智能", value: "ai" },
            { label: "区块链", value: "blockchain" },
        ],
    },
    {
        key: "companySize",
        label: "公司规模",
        options: [
            { label: "不限", value: "all" },
            { label: "0-20人", value: "0-20" },
            { label: "20-99人", value: "20-99" },
            { label: "100-499人", value: "100-499" },
            { label: "500-999人", value: "500-999" },
            { label: "1000-9999人", value: "1000-9999" },
            { label: "10000人以上", value: "above10000" },
        ],
    },
];

// 选中的筛选条件
const selectedFilters = reactive({
    city: "all",
    jobType: "all",
    salary: "all",
    experience: "all",
    education: "all",
    industry: "all",
    companySize: "all",
});

// 判断是否有选中的筛选条件
const hasSelectedFilters = computed(() => {
    return Object.values(selectedFilters).some((value) => value !== "all");
});

// 获取要显示的选中筛选条件
const displaySelectedFilters = computed(() => {
    const result = [];

    Object.keys(selectedFilters).forEach((key) => {
        if (selectedFilters[key] !== "all") {
            const filterGroup = mainFilters.find((group) => group.key === key);
            if (filterGroup) {
                const option = filterGroup.options.find((opt) => opt.value === selectedFilters[key]);
                if (option) {
                    result.push({
                        key: key,
                        label: filterGroup.label,
                        value: option.label,
                    });
                }
            }
        }
    });

    return result;
});

// 处理筛选条件选择
const handleFilterSelect = (key, value) => {
    selectedFilters[key] = value;
    emitFilterChange();
};

// 清除单个筛选条件
const clearFilter = (key) => {
    selectedFilters[key] = "all";
    emitFilterChange();
};

// 重置所有筛选条件
const resetAllFilters = () => {
    Object.keys(selectedFilters).forEach((key) => {
        selectedFilters[key] = "all";
    });
    emitFilterChange();
};

// 触发筛选变化事件
const emitFilterChange = () => {
    emit("filter-change", selectedFilters);
};

// 获取筛选条件的显示标签
const getFilterLabel = (key) => {
    const filterGroup = mainFilters.find((group) => group.key === key);
    if (filterGroup) {
        const option = filterGroup.options.find((opt) => opt.value === selectedFilters[key]);
        return option ? option.label : filterGroup.label;
    }
    return "";
};
</script>

<style scoped>
.position-filter {
    width: 100%;
    background-color: #fff;
    padding: 8px 0;
}

.filter-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.filter-row {
    display: flex;
    align-items: center;
    background: #fff;
    margin: 0;
    min-height: 40px;
}

.filter-col {
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-right: 20px;
}

.filter-button {
    padding: 0 8px;
    font-size: 13px;
    color: #666;
    height: 40px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
}

.filter-button:hover,
.filter-button.is-active {
    color: var(--el-color-primary);
}

.filter-button .el-icon {
    margin-left: 4px;
    font-size: 12px;
}

:deep(.el-dropdown-menu) {
    padding: 4px 0;
    min-width: 120px;
}

:deep(.el-dropdown-menu__item) {
    font-size: 13px;
    padding: 8px 16px;
    line-height: 1.4;
}

:deep(.el-dropdown-menu__item.is-active) {
    color: var(--el-color-primary);
    background-color: var(--el-color-primary-light-9);
}

.clear-filter {
    margin-left: auto;
    height: 40px;
    display: flex;
    align-items: center;
}

.clear-btn {
    color: #666;
    padding: 0 16px;
    font-size: 13px;
    height: 40px;
}

.clear-btn:hover {
    color: var(--el-color-primary);
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
    .filter-content {
        padding: 0 12px;
    }

    .filter-col {
        margin-right: 12px;
    }

    .filter-button {
        padding: 0 6px;
    }

    .clear-btn {
        padding: 0 12px;
    }
}
</style>
